<!--
 * @Author: 杨超
 * @Date: 2021-11-24 20:33:45
 * @LastEditTime: 2021-11-24 20:50:09
 * @LastEditors: 杨超
 * @Description:
-->
<template>
  <!-- 普通输入框 -->
  <div
    :style="item.style || {}"
    :class="`form-unqiue-${item.key} ${getTextModel ? '' : 'wti-untext-box'}`"
    class="form-input-box form-item-box"
  >
    <el-input
      v-if="!getTextModel"
      v-model.trim="val"
      :placeholder="getPlaceholder(item)"
      :disabled="getDisabled"
      type="number"
      :clearable="true"
      v-bind="bindOptions"
      @blur="(e) => onBlur(item, e)"
      @focus="(e) => onFocus(item, e)"
    >
      <template v-if="prepend" slot="prepend">{{ prepend }}</template>
      <template v-if="append" slot="append">{{ append }}</template>
    </el-input>
    <div v-else :style="item.textStyle || {}" class="form-input-text">
      <span v-if="prepend" class="prepend-msg">{{ prepend }}</span>
      <span class="text">{{ val || '-' }}</span>
      <span v-if="append" class="append-msg">{{ append }}</span>
    </div>
  </div>
</template>

<script>
// 普通数字输入框
import FormMixin from './mixin'

export default {
    name: 'FormNormalNumber',
    mixins: [FormMixin],
    computed: {
    // 前置符号
        prepend() {
            // 兼容性处理
            if (this.item.prepend) {
                return this.item.prepend
            } else {
                return ''
            }
        },
        // 后置符号
        append() {
            // 兼容性处理
            if (this.item.append) {
                return this.item.append
            } else {
                return ''
            }
        }
    }
}
</script>

<style scoped lang="scss">
.form-input-box ::v-deep .el-input {
  position: relative;
  width: 100%;
  height: 36px;

  .el-input__inner {
    height: 36px;
    line-height: 1px !important;
  }
}

.form-input-text {
  position: relative;
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #12182a;
}
</style>
